<div style="padding:20px;" id="container_m_#module.module_id">
<? $defaultBespinOptions = ', "settings": {"fontsize": 10, "tabstop": 4, "theme": "white", "codecomplete": true, "autoindent": true}, "stealFocus": true'; ?>
<form method="post" action="?event=builder:listModules" onsubmit="try{$('container_m_#module.module_id').save();}catch(e){};return false;" id="hform<?=(int)$arr_param['module']['module_id']?>">
	<label for="name">Name of Module</label><br/>
	<input type="text" id="m_name_#module.module_id" name="module[name]" value="#module.name" />
	<input type="hidden" id="m_nameh_#module.module_id" value="#module.name" /><br/>
	<br/>
	<!-- somehow need to manage the included JS and CSS libs -->
	<div style="float:left;margin-right:1%;width:49%;position:relative;">
		<div style="position:absolute;right:0px;">
			<? if ((int)$arr_param["module"]["module_id"] != 0) { ?>
				<a href="#" onclick="cssLibOpen(); return false;" style="font-size: 11px;">Stylesheet Management</a>
			<? } ?>
			<a href="#" onclick="this.next().show();this.hide();this.parentNode.parentNode.next().hide();this.parentNode.parentNode.style.width='100%';return false;" title="maximize code view"><img src="templates/builder/images/icon_maximize.gif" border="0" alt="maximize code view" /></a>
			<a href="#" style="display:none;" onclick="this.previous().show();this.hide();this.parentNode.parentNode.next().show();this.parentNode.parentNode.style.width='49%';return false;" title="minimize code view"><img src="templates/builder/images/icon_minimize.gif" border="0" alt="minimize code view" /></a>
		</div>
		<label for="style_code">CSS / LESS styles</label>
        <input type="hidden" rel="code<?=(int)$arr_param['module']['module_id']?>" id="hCode<?=(int)$arr_param['module']['module_id']?>" name="module[style_code]" value="" />
        <!--[noeval]-->
		<div style="border:1px solid #ccc;" rel="builder:editModule&refresh=style_code&module_id=<?=(int)$arr_param['module']['module_id']?>" id="code<?=(int)$arr_param['module']['module_id']?>" data-bespinoptions='{"syntax": "css"<?=$defaultBespinOptions?>}'><?=htmlspecialchars($arr_param["module"]["style_code"])?></div>
		<!--[/noeval]-->
	</div>
	<div style="float:left;width:50%;position:relative;">
		<div style="position:absolute;right:0px;">
			<? if ((int)$arr_param["module"]["module_id"] != 0) { ?>
				<a href="#" onclick="jsLibOpen(); return false;" style="font-size: 11px;">Javascript Management</a>
			<? } ?>
			<a href="#" onclick="this.next().show();this.hide();this.parentNode.parentNode.previous().hide();this.parentNode.parentNode.style.width='100%';return false;" title="maximize code view"><img src="templates/builder/images/icon_maximize.gif" border="0" alt="maximize code view" /></a>
			<a href="#" style="display:none;" onclick="this.previous().show();this.hide();this.parentNode.parentNode.previous().show();this.parentNode.parentNode.style.width='50%';return false;" title="minimize code view"><img src="templates/builder/images/icon_minimize.gif" border="0" alt="minimize code view" /></a>
		</div>
		<label for="js_code<?=(int)$arr_param['module']['module_id']?>">Javascript Code: </label><br/>
		<input type="hidden" rel="js_code<?=(int)$arr_param["module"]["module_id"]?>" id="hJsCodem<?=(int)$arr_param["module"]["module_id"]?>" name="module[js_code]" value="" />
		<!--[noeval]-->
		<div style="border:1px solid #ccc;" rel="builder:editModule&refresh=js_code&module_id=<?=(int)$arr_param['module']['module_id']?>" id="js_code<?=(int)$arr_param["module"]["module_id"]?>" data-bespinoptions='{"syntax": "js"<?=$defaultBespinOptions?>}'><?=htmlspecialchars($arr_param["module"]["js_code"])?></div>
		<!--[/noeval]-->
	</div>
	<div style="clear:both;"></div>

        <script type="text/javascript">
        	//<![CDATA[
				setTimeout(function() {
					$("container_m_#module.module_id").save = function() {
				    	  if (this.saving) return;
				    	  this.saving = true;
				    	  document.title = "Saving module "+$("m_name_#module.module_id").value+"...";
						if (["empty", "main", "builder"].indexOf($('m_name_#module.module_id').getValue()) >= 0) {
							$('m_name_#module.module_id').value = "_" + $('m_name_#module.module_id').getValue();
						}
						$('hJsCodem<?=(int)$arr_param["module"]["module_id"]?>').value=Builder.getCode("js_code<?=(int)$arr_param["module"]["module_id"]?>");
						$("hCode<?=(int)$arr_param['module']['module_id']?>").value=Builder.getCode("code<?=(int)$arr_param['module']['module_id']?>");
					    var me = this;
						invoke(null, 'builder:editModule&check=1&module_id=<?=(int)$arr_param['module']['module_id']?>', $('hform<?=(int)$arr_param["module"]["module_id"]?>').serialize(), true, function(req) {
							me.saving = false;
							document.title = "Prails Home";
							Ext.ux.util.msg("Saving completed.", "Your changes have been saved successfully.");
							$("js_code<?=(int)$arr_param["module"]["module_id"]?>").crc.content = Builder.getCode("js_code<?=(int)$arr_param["module"]["module_id"]?>");
							$("js_code<?=(int)$arr_param["module"]["module_id"]?>").dirty = false;
							$("code<?=(int)$arr_param["module"]['module_id']?>").crc.content = Builder.getCode("code<?=(int)$arr_param["module"]["module_id"]?>");
							$("code<?=(int)$arr_param['module']['module_id']?>").dirty = false;
							if (<?=(int)$arr_param["module"]["module_id"]?> == 0) {
								var name = $("m_name_#module.module_id").getValue();
								var id = req.responseText.split(/\n/g)[0];
								// replace this tab and add a new entry in the tree list
								Builder.closeTab("m_<?=(int)$arr_param["module"]["module_id"]?>");
								module = new Ext.tree.TreeNode({
												text: name,
												leaf: true,
												cls: "x-tree-node-collapsed",
												id: id,
												allowChildren: false
											});
								module.handlers = [];
								module.datas = [];
								Builder.root.appendChild(module);
								Builder.editModuleOptions(module);
//								location.reload();
							}
						});
						return false;			
					};
					Builder.applyBespin("code<?=(int)$arr_param['module']['module_id']?>", function(fr) {
						$("code<?=(int)$arr_param['module']['module_id']?>").down("iframe").up().style.height = (parseInt($("hform<?=(int)$arr_param['module']['module_id']?>").parentNode.parentNode.style.height) - 150) + "px";
						if (!$("js_code<?=(int)$arr_param["module"]["module_id"]?>").applied) {
							$("js_code<?=(int)$arr_param["module"]["module_id"]?>").applied = true;
							Builder.applyBespin("js_code<?=(int)$arr_param["module"]["module_id"]?>", function(fr) {
								$("js_code<?=(int)$arr_param['module']['module_id']?>").down('iframe').up().style.height = (parseInt($("hform<?=(int)$arr_param['module']['module_id']?>").parentNode.parentNode.style.height) - 150) + "px";								
						      	setTimeout(function() {
									$('hJsCodem<?=(int)$arr_param["module"]["module_id"]?>').value=Builder.getCode("js_code<?=(int)$arr_param["module"]["module_id"]?>");
									$("hCode<?=(int)$arr_param['module']['module_id']?>").value=Builder.getCode("code<?=(int)$arr_param['module']['module_id']?>");
						      	}, 1000);
								
							}, Object.extend(Builder.prailsNamespace, {
				              save: function() {
				                  parent.$("container_m_#module.module_id").save();
				                }
				            }));
						}
					}, Object.extend(Builder.prailsNamespace, {
						save: function() {
							parent.$("container_m_#module.module_id").save();
						}
			        }));
					
					Ext.getCmp("portlet_content_m_<?=(int)$arr_param["module"]["module_id"]?>").getTopToolbar().add({
						xtype: "button",
						text: "Save",
						iconCls: "save",
						handler: function(e) {
							$("container_m_#module.module_id").save();						
						}
					},"-", {
						xtype: "button",
						text: "Edit Resources",
						iconCls: "resource",
						disabled: (<?=(int)$arr_param["module"]["module_id"]?> == 0 ? true : false),
						handler: function(e){
							Builder.editModuleResource({id: <?=(int)$arr_param["module"]["module_id"]?>, text: "<?=$arr_param["module"]["name"]?>"});
						}						
					}, "-", {
						xtype: "button",
						id: "module.#module.module_id_viewConfig.button",
						text: "Edit Configuration",
						iconCls: "config",
						disabled: (<?=(int)$arr_param["module"]["module_id"]?> == 0 ? true : false),
						handler: function(e) {
							Builder.editConfiguration({id: <?=(int)$arr_param["module"]["module_id"]?>, text: "#module.name Configuration"});
						}
					}, "-", {
						xtype: "button",
						id: "module.#module.module_id_viewHistory.button",
						text: "View History",
						iconCls: "history",
						disabled: (<?=(int)$arr_param["module"]["module_id"]?> <= 0 ? true : false),
						handler: function(e) {
							if ($("h_#module.module_id") != null) {
								$("h_#module.module_id").fisheye.dispose();
								$("h_#module.module_id").remove();
								Ext.getCmp("module.#module.module_id_viewHistory.button").setText("View History");
							} else {
								Builder.browseModuleHistory(#module.module_id);
								Ext.getCmp("module.#module.module_id_viewHistory.button").setText("Leave History");
							}
						}
					}, "-", {
						xtype: "button",
						id: "module.#module.module_id_editTestcases.button",
						text: "#module.name Testcases",
						iconCls: "testcase",
						disabled: (<?=(int)$arr_param["module"]["module_id"]?> <= 0 ? true : false),
						handler: function(e) {
							Builder.editTestcases({id: <?=(int)$arr_param["module"]["module_id"]?>, text: "#module.name Testcases"});
						}
					});	
					Ext.getCmp("portlet_content_m_<?=(int)$arr_param["module"]["module_id"]?>").getTopToolbar().doLayout();
				}, 100);
				
				var jsLibOpen = function() {
					var win=new Ext.Window({
						title: "Javascript Management",
						closable: true,
						width: 400,
						shadow: true,
						height: 350,
						modal: true, 
						items: [
							grid = new Ext.grid.EditorGridPanel({
								store: gridStore = new Ext.data.Store({
									reader: new Ext.data.ArrayReader({
										idIndex: 0
									}, Ext.data.Record.create([
										{name: "file"},
										{name: "size"}
									]))
								}),
								cm: new Ext.grid.ColumnModel({
									defaults: {
										sortable: true
									},
									columns: [
										{
											header: "File",
											width: 300,
											dataIndex: "file",
											editor: new Ext.form.TextField({allowBlank: false, listeners: {
												change: function(el, newValue, oldValue) {
													Ext.Ajax.request({
														url: "?event=builder:proxyRequest&url="+encodeURIComponent(newValue),
														success: function(req, opts) {
															grid.getSelectionModel().selection.record.set("size", ""+Math.round(req.responseText.length / 1024)+" kB");
														}
													});
												}
											}})
										}, {
											header: "Size in kB",
											width: 60,
											dataIndex: "size"
										}
									]
								}),
								viewConfig: {
									sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
									emptyText: "No Javascript Libraries found.",
									forceFit: true
								},
								height: 320,
								width: 385,
								border: false,
								autoScroll: true,
								clicksToEdit: 2,
								tbar: [
								{
									text: 'Add Library',
									iconCls: "add",
								    handler : function(){
						                // access the Record constructor through the grid's store
						                var Field = grid.getStore().recordType;
						                var p = new Field({
						                    file: '',
						                    size: '0 kB'
						                });
						                grid.stopEditing();
						                grid.getStore().insert(0, p);
						                grid.startEditing(0, 0);
						            }
						        },{
									text: "Remove Library",
									iconCls: "delete",
									handler: function() {
										grid.getStore().remove(grid.getSelectionModel().selection.record);
									}
								}],
								bbar: [{
									xtype: "button",
									iconCls: "save",									
									text: "save",
									handler: function() {
										var list = grid.getStore().data.items;
										window['jsStoreContent<?=$arr_param["module"]["module_id"]?>'] = [];
										var params = {};
										for (var i = 0; i < list.length; i++) {
											var item = list[i];
											window['jsStoreContent<?=$arr_param["module"]["module_id"]?>'].push([
												item.data.file,
												item.data.size
											]);
											params["module[header_info][js_includes]["+i+"]"] = item.data.file;
										}
										if (list.length <= 0) {
											params["module[header_info][js_includes]"] = "1";											
										}
										// send post to save in module
										Ext.Ajax.request({
											method: "post",
											url: "?event=builder:editModule&check=1&module_id=<?=$arr_param['module']['module_id']?>",
											params: params
										});
										win.close();
									}
								}, {
									xtype: "button",
									text: "cancel",
									handler: function() {
										win.close();
									}
								}]
							})
						]
					});
					win.show(this);
					
					gridStore.loadData(window['jsStoreContent<?=$arr_param["module"]["module_id"]?>'] || [
					<? if ($arr_param["module"]["header_info"]["js_includes"] && is_array($arr_param["module"]["header_info"]["js_includes"])) { foreach ($arr_param["module"]["header_info"]["js_includes"] as $i => $field) { ?>
						<? if ($i > 0) { ?>,<? } $url = in_array(substr($field, 0, 6), Array("https:", "http:/", "ftp://")); ?>
						["<?=$field?>", "<?=round((!$url ? filesize($field) : 0) / 1024)?> kB"]
					<? }} ?>
					]);
				};
				
				var cssLibOpen = function() {
					var win=new Ext.Window({
						title: "Stylesheet Management",
						closable: true,
						width: 400,
						shadow: true,
						height: 350,
						modal: true, 
						items: [
							grid = new Ext.grid.EditorGridPanel({
								store: gridStore = new Ext.data.Store({
									reader: new Ext.data.ArrayReader({
										idIndex: 0
									}, Ext.data.Record.create([
										{name: "file"},
										{name: "size"}
									]))
								}),
								cm: new Ext.grid.ColumnModel({
									defaults: {
										sortable: true
									},
									columns: [
										{
											header: "File",
											width: 300,
											dataIndex: "file",
											editor: new Ext.form.TextField({allowBlank: false, listeners: {
												change: function(el, newValue, oldValue) {
													Ext.Ajax.request({
														url: "?event=builder:proxyRequest&url="+encodeURIComponent(newValue),
														success: function(req, opts) {
															grid.getSelectionModel().selection.record.set("size", ""+Math.round(req.responseText.length / 1024)+" kB");
														}
													});
												}
											}})
										}, {
											header: "Size in kB",
											width: 60,
											dataIndex: "size"
										}
									]
								}),
								viewConfig: {
									sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
									emptyText: "No Stylesheets found.",
									forceFit: true
								},
								height: 320,
								width: 385,
								border: false,
								autoScroll: true,
								clicksToEdit: 2,
								tbar: [
								{
									text: 'Add Stylesheet',
									iconCls: "add",
								    handler : function(){
						                // access the Record constructor through the grid's store
						                var Field = grid.getStore().recordType;
						                var p = new Field({
						                    file: '',
						                    size: '0 kB'
						                });
						                grid.stopEditing();
						                grid.getStore().insert(0, p);
						                grid.startEditing(0, 0);
						            }
						        },{
									text: "Remove Stylesheet",
									iconCls: "delete",
									handler: function() {
										grid.getStore().remove(grid.getSelectionModel().selection.record);
									}
								}],
								bbar: [{
									xtype: "button",
									iconCls: "save",									
									text: "Save",
									handler: function() {
										var list = grid.getStore().data.items;
										window['cssStoreContent<?=$arr_param["module"]["module_id"]?>'] = [];
										var params = {};
										for (var i = 0; i < list.length; i++) {
											var item = list[i];
											window['cssStoreContent<?=$arr_param["module"]["module_id"]?>'].push([
												item.data.file,
												item.data.size
											]);
											params["module[header_info][css_includes]["+i+"]"] = item.data.file;
										}
										if (list.length <= 0) {
											params["module[header_info][css_includes]"] = "1";											
										}
										// send post to save in module
										Ext.Ajax.request({
											method: "post",
											url: "?event=builder:editModule&check=1&module_id=<?=$arr_param['module']['module_id']?>",
											params: params
										});
										win.close();
									}
								}, {
									xtype: "button",
									text: "Cancel",
									handler: function() {
										win.close();
									}
								}]
							})
						]
					});
					win.show(this);
					
					gridStore.loadData(window['cssStoreContent<?=$arr_param["module"]["module_id"]?>'] || [
					<? if ($arr_param["module"]["header_info"]["css_includes"] && is_array($arr_param["module"]["header_info"]["css_includes"])) { foreach ($arr_param["module"]["header_info"]["css_includes"] as $i => $field) { ?>
						<? if ($i > 0) { ?>,<? } $url = in_array(substr($field, 0, 6), Array("https:", "http:/", "ftp://")); ?>						
						["<?=$field?>", "<?=round((!$url ? filesize($field) : 0) / 1024)?> kB"]
					<? }} ?>
					]);
				};				
				
			//]]>
        </script>

</form>
</div>
